<template>
  <div class="search">
    <div class="wrapper">
      <!-- 头部 star  -->
      <div class="header">
        <div class="header_left">
          <router-link tag="a" :to="this.routesId"
            ><img
              :src="require('../assets/img/bar_icon_back_black.png')"
              alt=""
          /></router-link>
          <div class="inp">
            <input type="text" placeholder="输入您想听的故事" v-model="value" />
          </div>
        </div>
        <div class="header_right"><button @click="search">搜索</button></div>
      </div>
      <!-- 头部 end   -->

      <!-- 热门搜索 star  -->
      <div class="hotsearch">
        <div class="hotsearch_title">
          <p>热门搜索</p>
          <div class="refresh" @click="change">
            <img :src="require('../assets/img/sx.webp')" alt="" />
          </div>
        </div>
        <div class="hotsearch_main">
          <ul>
            <li v-for="item in hotSearchList" :key="item.id" @click="hotsearch(item.name)">
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 热门搜索 end  -->

      <!-- 搜索历史 star  -->
      <div class="history">
        <div class="history_title">
          <p>搜索历史</p>
          <p @click="clear">清空</p>
        </div>
        <div class="history_list">
          <ul>
            <li v-for="(item, index) in searchHistory" :key="index" >
              <p @click="hotsearch(item)">{{ item }}</p>
              <div class="del" @click="del(index)">
                <img :src="require('../assets/img/fafa.webp')" alt="" />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 搜索历史 end  -->
    </div>
  </div>
</template>

<script>
import { getJsonData } from "../api/home.js";
export default {
  props: ["hotSearchLists"],
  data() {
    return {
      routesId: null,
      searchHistory: JSON.parse(localStorage.getItem("historylist")) || [],
      hotSearch: [],
      allSearch: [],
      hotSearchList: this.hotSearchLists,
      value: "",
    };
  },
  methods: {
    // 点击热门搜索的内容// 搜索历史点击搜索
    hotsearch(name){
      this.value=name
      this.search()
    },
    
    // 搜索
    search() {
      let history = this.searchHistory;
      if (this.value != "") {
        console.log(this.value);
        if (this.searchHistory.indexOf(this.value) == -1) {
          this.searchHistory.push(this.value);
          window.localStorage.setItem("historylist", JSON.stringify(history));
          // this.searchHistory=JSON.parse(localStorage.getItem('historylist'))
          console.log(this.searchHistory);
        }
      }
      console.log(this.allSearch);
      if (this.value != "") {
        this.$router.push(
          "/searchResult?name=" + this.value + "&id=" + this.routesId
        );
        this.$emit("search", this.value);
      } else {
        this.$toast("搜索内容不能为空");
      }
    },
    // 删除单个搜索历史
    del(index) {
      this.searchHistory.splice(index, 1);
      window.localStorage.setItem(
        "historylist",
        JSON.stringify(this.searchHistory)
      );
    },
    // 清除所有搜索历史
    clear() {
      window.localStorage.removeItem("historylist");
      this.searchHistory = [];
    },
    // 热门搜索换一换
    change() {
      this.hotSearchList = [];
      let arr = [];
      let len = this.hotSearch.length;
      for (var i = 0; i < 8; i++) {
        arr[i] = parseInt(Math.random() * len);
        for (var j = 0; j < i; j++) {
          if (arr[i] == arr[j]) {
            i--;
          }
        }
      }
      arr.forEach((item) => {
        this.hotSearchList.push(this.hotSearch[item]);
        console.log(item);
      });
      console.log(this.hotSearchList);
    },
  },
  created() {
    // 接收路由传参，参数是路由命名，页面返回时跳转的路由
    this.routesId = this.$route.query.id;
    // console.log(this.$route.query.id);

    // 获取搜索历史列表和热门搜索列表
    getJsonData().then((data) => {
      // this.searchHistory=data.searchHistory
      this.hotSearch = data.hotSearch;
      this.allSearch = data.allLists;
    });
    // this.clear()
  },
  // Updated() {
  //   // 清除所有搜索历史
  //   this.clear()
  // },

  // beforeRouteEnter(to,from,next){
  //   console.log(to,from);
  //   next();
  // }
};
</script>

<style lang="scss" scoped>
.search {
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;

    .header {
      position: fixed;
      top: 0;
      left: 0;
      height: 50px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      // padding: 0 16px;
    }
    .header_left {
      display: flex;
      align-items: center;
      padding-left:16px;
      img {
        height: 20px;
        display: block;
      }
      .inp {
        padding-left: 26px;
      }
      input {
        padding: 0;
        padding: 0;
        border: none;
        outline: none;
        font-size: 15px;
        height: 32px;
        padding-left: 26px;
        background: url(../assets/img/ss.webp) left center no-repeat;
        background-size: 19px;
      }
    }
    .header_right {
      padding-right:16px;
      button {
        outline: none;
        width: 46px;
        height: 32px;
        border: none;
        color: #fff;
        background-color: #f94c00;
        border-radius: 8px;
      }
    }
    .hotsearch {
      padding: 0 16px;
      height: 250px;
      overflow: hidden;
      padding-top: 50px;
    }
    .hotsearch_title,
    .history_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
    }
    .hotsearch_title p,
    .history_title p {
      color: #333;
      font-size: 14px;
      font-weight: bold;
    }
    .hotsearch_title {
      .refresh {
        img {
          height: 16px;
          display: block;
        }
      }
    }
    .hotsearch_main {
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          font-size: 15px;
          background-color: #f5efd9;
          height: 28px;
          line-height: 28px;
          text-align: center;
          margin: 5px 6px;
          padding: 0 8px;
          border-radius: 14px;
          color: #3145d8;
          &:nth-child(n + 6) {
            background-color: #f4f4f4;
            border: 1px solid #999;
            border-radius: 8px;
            padding: 0 8px;
            color: #868686;
          }
        }
      }
    }
    .history {
      padding: 0 16px;
    }
    .history_title {
      p {
        &:nth-child(2) {
          color: #707070;
        }
      }
    }
    .history_list {
      ul {
        li {
          display: flex;
          height: 40px;
          align-items: center;
          justify-content: space-between;
          p {
            font-size: 14px;
            color: #868686;
            flex: 1;
          }
          .del {
            img {
              display: block;
              height: 12px;
            }
          }
        }
      }
    }
  }
}
</style>